import color16 from '../util/index.js';
import Bubble from './Bubble.js';
import Config from './Config.js'

class Area {
  constructor(context) {
    // 画笔
    this.context = context;
    // 泡泡组
    this.bubbles = [];
    // 暂停标志
    this.suspend = true;
  }

  // 初始化
  init() {
    // id生成
    let id = 1;
    // 不断生成泡泡
    setInterval(() => {
      // 页面失焦或点击暂停时暂停定时器触发
      if (document.hasFocus() && this.suspend) {
        let params = {
          id: id++,
          cx: Math.floor(Math.random() * Config.width),
          cy: Config.height + Config.defaultRadius,
          r: Config.defaultRadius,
          fillColor: color16()
        }
        let bubble = new Bubble(params);
        this.bubbles.push(bubble);
      }
    }, Config.interval);
  }

  // 获取鼠标点击位置
  getCanvasPosition(e) {
    return {
      cx: e.offsetX,
      cy: e.offsetY,
    }
  }

  // 计算是否点到泡泡内
  getDistance(p1, p2) {
    return Math.sqrt((p1.cx - p2.cx) ** 2 + (p1.cy - p2.cy) ** 2);
  }

  // 判断是否点到了泡泡上
  ifInBubble(pos) {
    for (let i = 0; i < this.bubbles.length; i++) {
      if (this.getDistance(this.bubbles[i], pos) < this.bubbles[i].r) {
        return this.bubbles[i];
      }
    }
    return false;
  }

  // 更改移动状态
  changeState(id, state) {
    for (let i = 0; i < this.bubbles.length; i++) {
      if (this.bubbles[i].id === id) {
        this.bubbles[i].state = state;
        return;
      }
    }
  }

  // 泡泡跟随鼠标移动
  bubbleMove(id, pos) {
    // 当前鼠标移动坐标
    const { cx, cy } = pos;
    // 改变选中泡泡坐标
    for (let i = 0; i < this.bubbles.length; i++) {
      if (id === this.bubbles[i].id) {
        this.bubbles[i].cx = cx;
        this.bubbles[i].cy = cy;
      }
    }
  }

  // 渲染
  render() {
    this.bubbles.forEach(e => {
      // 状态正常时进行移动
      if (e.state === 0 && this.suspend) {
        e.cy -= Config.speed;
      }
      // 渲染
      e.render(this.context)
      // 泡泡超出屏幕外移除
      if (e.cy < -(Config.defaultRadius * 2)) {
        for (let i = 0; i < this.bubbles.length; i++) {
          if (e.id === this.bubbles[i].id) {
            setTimeout(() => {
              this.bubbles.splice(i, 1);
            }, 10);
          }
        }
      }
    })
  }

  // 暂停事件
  suspendBtn() {
    this.suspend = !this.suspend;
    return this.suspend;
  }
}

export default Area;